import { Menu, Divider, Layout } from "antd";
import {
    AppstoreOutlined,
    MailOutlined,
    SettingOutlined,
} from "@ant-design/icons";

const { Sider } = Layout;

const items = [
    {
        label: "邮箱",
        key: "mail",
        icon: <MailOutlined />,
    },
    {
        label: "应用",
        key: "app",
        icon: <AppstoreOutlined />,
    },
    {
        label: "设置",
        key: "setting",
        icon: <SettingOutlined />,
        children: [
            {
                type: "group",
                label: "电池",
                children: [
                    {
                        label: "电池容量",
                        key: "setting-1",
                    },
                    {
                        label: "电池续航",
                        key: "setting-2",
                    },
                ],
            },
            {
                type: "group",
                label: "通讯",
                children: [
                    {
                        label: "WIFI信息",
                        key: "setting-3",
                    },
                    {
                        label: "IPV6",
                        key: "setting-4",
                    },
                ],
            },
        ],
    },
];
const View = () => {
    return (
        <>
            <Menu mode='horizontal' items={items} />
            <Divider />
            <Sider width={200}>
                <Menu mode='vertical' theme='dark' items={items} width={200} />
            </Sider>
            <Divider />
            <Sider width={200}>
                <Menu
                    mode='inline'
                    theme='light'
                    items={items}
                    width={200}
                    defaultSelectedKeys={["setting-1"]}
                    defaultOpenKeys={["setting"]}
                />
            </Sider>
        </>
    );
};

export default View;
